import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'
import { ViteEjsPlugin } from "vite-plugin-ejs"
//引入path用于写别名配置,自带无须安装
import path from 'path'
//使用svg-icons插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 引用mock插件
import { viteMockServe } from 'vite-plugin-mock'
let env = {} as any
const root = process.cwd()
env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ViteEjsPlugin({
      title: env.VITE_APP_TITLE
    }),
    VueDevTools(),
    viteMockServe(
      {
        logger: false,
        mockPath: "./src/mock",
        prodEnabled: env.VITE_PROD_MOCK === 'Y',
        injectCode: `
          import { setupMockServer } from '@/mock/index.ts';
          setupMockServer();
        `
      }
    ),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")], //svg图片存放的目录
      symbolId: "icon-[name]", // symbol的id
      inject: "body-last", // 插入的位置
    })
  ],
  resolve: {
    // 别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 4000,
    host: true,
    open: true,
    proxy: {
      // 选项写法
      '/api': {
        target: 'http://127.0.0.1', //填写代理地址
        changeOrigin: false,
        rewrite: path => path.replace(/^\/api/, '')
      },
    },
  },
  // 打包配置 pnpm run build
  build: {
    //指定输出路径
    outDir: 'dist',
    //生成静态资源的存放路径
    assetsDir: 'assets',
    //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    assetsInlineLimit: 4096,
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    minify: 'terser',
    // 简要配置
    terserOptions: {
      compress: {
        // 移除console
        drop_console: true,
        // 移除debugger
        drop_debugger: true,
      },
      // 保留类名
      keep_classnames: true,
      format: {
        // 移除所有的注释
        comments: true,
      },
    },
    //自定义底层的 Rollup 打包配置
    rollupOptions: {
      input: {
        //可以配置多个，表示多入口
        index: path.resolve(__dirname, 'index.html'),
        // project:resolve(__dirname,"project.html")
      },
      output: {
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'static/js/[name]-[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'static/js/[name]-[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        // vue vue-router pinia合并打包
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          ElementPlus: ['element-plus'],
          axios: ['axios'],
          // md5: ['md5'],
          // 示例TODO: 两个文件合并成一个helloWorld文件
          // helloWorld: ['src/components/HelloWorld.vue','src/views/HomeView.vue'],
          // commons: ['src/commons/request.js'],
        },
      },
    },
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    //chunk 大小警告的限制
    chunkSizeWarningLimit: 1000,
  },
})
